<template>
  <div class="insuranceScheme">
    <div v-if="showList">
      <el-button type="primary" class="add" @click="addScheme()"
        >+添加方案</el-button
      >
      <el-table :data="grades">
        <el-table-column
          prop="gradeCode"
          label="方案名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gradeName"
          label="适用范围"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="适用人数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="缴纳基数平均标准"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" prop="createTime" align="center">
          <template slot-scope="scope">
            <span class="org-oper">
              <el-link
                size="mini"
                type="success"
                @click="detail(scope.row)"
                v-hasPermi="['organization:grade:edit']"
                >详情</el-link
              >
              <el-link
                size="mini"
                type="primary"
                @click="edit(scope.row)"
                v-hasPermi="['organization:grade:edit']"
                >修改</el-link
              >
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                v-hasPermi="['organization:grade:remove']"
                >删除</el-link
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
      <edit v-if="editDialog" :editDialog="editDialog" @close="closeEdit"></edit>
    </div>
    <div v-else>
      <detail
        v-if="detailData.open"
        :prop="detailData"
        @close="closeDetail"
      ></detail>
    </div>
  </div>
</template>

<script>
import edit from "./edit.vue";
import detail from "./detail.vue";
export default {
  name: "insuranceScheme",
  components: { edit, detail },
  data() {
    return {
      activeName: "first",
      showList: true,
      editDialog: false,
      detailOpen: false,
      detailData: {
        open: false,
        employeeId: null,
        employeeCode: null,
      },
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 20,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 30,
        },
      ],
      queryParams: {
        employeeCode: null,
        employeeName: null,
        employeeTel: null,
        employeeJoinStatus: null,
        employeeFormalStatus: null,
        employeeLeaveStatus: null,
        employeeRetiredStatus: null,
        current: 1, //当前页码
        size: 10, //每页显示数量
      },
      grades: [
        {
          gradeCode: "教职员工薪酬方案",
          gradeName: "四川城院、计算机学院",
          sort: 532548,
        },
        {
          gradeCode: "教职员工薪酬方案",
          gradeName: "四川城院、计算机学院",
          sort: 532548,
        },
        {
          gradeCode: "教职员工薪酬方案",
          gradeName: "四川城院、计算机学院",
          sort: 532548,
        },
        {
          gradeCode: "教职员工薪酬方案",
          gradeName: "四川城院、计算机学院",
          sort: 532548,
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      let name = tab.name;
      switch (name) {
        case "holdPost":
          this.queryParams.employeeStatus = "2";
          this.tableCols = [
            {
              prop: "employeeName",
              label: "中文姓名",
              show: true,
              disable: false,
            },
            { prop: "employeeCode", label: "工号", show: true, disable: false },
            {
              prop: "employeeStatus",
              label: "转正状态",
              show: true,
              disable: false,
            },
            { prop: "postName", label: "岗位名称", show: true, disable: false },
            {
              prop: "postTypeName",
              label: "岗位类别",
              show: true,
              disable: false,
            },
            {
              prop: "gradeName",
              label: "岗位职级",
              show: true,
              disable: false,
            },
            {
              prop: "organizationName",
              label: "直属组织",
              show: true,
              disable: false,
            },
            {
              prop: "employeeEmployType",
              label: "雇佣性质",
              show: true,
              disable: false,
            },
            {
              prop: "employeeInHeadship",
              label: "编制类型",
              show: true,
              disable: false,
            },
            {
              prop: "employeeGender",
              label: "性别",
              show: true,
              disable: false,
            },
            { prop: "age", label: "年龄", show: true, disable: false },
            {
              prop: "employeeTel",
              label: "手机号",
              show: true,
              disable: false,
            },
          ];
          break;
        case "leave":
          this.queryParams.employeeStatus = "3";
          this.tableCols = [
            {
              prop: "employeeName",
              label: "中文姓名",
              show: true,
              disable: false,
            },
            { prop: "employeeCode", label: "工号", show: true, disable: false },
            { prop: "postName", label: "岗位名称", show: true, disable: false },
            {
              prop: "postTypeName",
              label: "岗位类别",
              show: true,
              disable: false,
            },
            {
              prop: "gradeName",
              label: "岗位职级",
              show: true,
              disable: false,
            },
            {
              prop: "organizationName",
              label: "直属组织",
              show: true,
              disable: false,
            },
            {
              prop: "employeeEmployType",
              label: "雇佣性质",
              show: true,
              disable: false,
            },
            {
              prop: "employeeInHeadship",
              label: "编制类型",
              show: true,
              disable: false,
            },
            {
              prop: "employeeGender",
              label: "性别",
              show: true,
              disable: false,
            },
            { prop: "age", label: "年龄", show: true, disable: false },
            {
              prop: "employeeJoinTime",
              label: "入职日期",
              show: true,
              disable: false,
            },
            {
              prop: "employeeLeaveTime",
              label: "离职日期",
              show: true,
              disable: false,
            },
            {
              prop: "employeeLeaveType",
              label: "离职类型",
              show: true,
              disable: false,
            },
          ];
          break;
        case "retired":
          this.queryParams.employeeStatus = "4";
          this.tableCols = [
            {
              prop: "employeeName",
              label: "中文姓名",
              show: true,
              disable: false,
            },
            { prop: "employeeCode", label: "工号", show: true, disable: false },
            { prop: "postName", label: "岗位名称", show: true, disable: false },
            {
              prop: "postTypeName",
              label: "岗位类别",
              show: true,
              disable: false,
            },
            {
              prop: "gradeName",
              label: "岗位职级",
              show: true,
              disable: false,
            },
            {
              prop: "organizationName",
              label: "直属组织",
              show: true,
              disable: false,
            },
            {
              prop: "employeeEmployType",
              label: "雇佣性质",
              show: true,
              disable: false,
            },
            {
              prop: "employeeInHeadship",
              label: "编制类型",
              show: true,
              disable: false,
            },
            {
              prop: "employeeGender",
              label: "性别",
              show: true,
              disable: false,
            },
            { prop: "age", label: "年龄", show: true, disable: false },
            {
              prop: "employeeJoinTime",
              label: "入职日期",
              show: true,
              disable: false,
            },
            {
              prop: "employeePlanLeaveTime",
              label: "计退休日期",
              show: true,
              disable: false,
            },
            {
              prop: "employeeRetiredTime",
              label: "办理日期",
              show: true,
              disable: false,
            },
          ];
          break;
        default:
          this.queryParams.employeeStatus = "2";
          this.tableCols = [
            {
              prop: "employeeName",
              label: "中文姓名",
              show: true,
              disable: false,
            },
            { prop: "employeeCode", label: "工号", show: true, disable: false },
            {
              prop: "employeeStatus",
              label: "转正状态",
              show: true,
              disable: false,
            },
            { prop: "postName", label: "岗位名称", show: true, disable: false },
            {
              prop: "postTypeName",
              label: "岗位类别",
              show: true,
              disable: false,
            },
            {
              prop: "gradeName",
              label: "岗位职级",
              show: true,
              disable: false,
            },
            {
              prop: "organizationName",
              label: "直属组织",
              show: true,
              disable: false,
            },
            {
              prop: "employeeEmployType",
              label: "雇佣性质",
              show: true,
              disable: false,
            },
            {
              prop: "employeeInHeadship",
              label: "编制类型",
              show: true,
              disable: false,
            },
            {
              prop: "employeeGender",
              label: "性别",
              show: true,
              disable: false,
            },
            { prop: "age", label: "年龄", show: true, disable: false },
            {
              prop: "employeeTel",
              label: "手机号",
              show: true,
              disable: false,
            },
          ];
          break;
      }
      this.getPageList();
    },
    clickReset() {
      this.reset = !this.reset;
    },
    resetQuery() {
      this.queryParams = {
        employeeCode: null,
        employeeName: null,
        employeeTel: null,
        employeeStatus: "2",
        size: 10,
        current: 1,
      };
      this.getPageList();
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getPageList();
    },
    // 添加事件
    addScheme() {
      this.editDialog = true;
    },
    // 修改弹窗
    edit() {
      this.editDialog = true;
    },
    closeEdit(params) {
      this.editDialog = params;
    },
    // 详情页面
    detail(row) {
      this.showList = false;
      this.detailData = {
        open: true,
        employeeId: row.employeeId,
        employeeCode: row.employeeCode,
      };
    },
    closeDetail() {
      this.showList = true;
      this.detailData = { open: false, employeeId: null, employeeCode: null };
    },
  },
};
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
.el-tabs {
  margin: 0 20px;
}
.el-tabs__item {
  font-size: 16px;
  font-weight: bold;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.chance {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.context {
  padding-left: 20px;
}
.select {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.select .el-dropdown-link {
  color: black;
  border: 1px solid #ccc;
  padding: 10px;
  margin-right: 20px;
  border-radius: 5px;
}
.el-link {
  margin: 0 5px;
}
.el-date-editor {
  width: 120px;
  margin-right: 20px;
}
.el-pagination {
  margin-top: 20px;
  float: right;
}
.add {
  float: right;
  margin: 10px;
}
</style>